<template>
	<view>
		<uni-ec-canvas class="uni-ec-canvas" id="line-chart" ref="canvas" canvas-id="lazy-load-chart" :ec="ec"></uni-ec-canvas>
	</view>
</template>

<script>
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas'
	import * as echarts from '@/components/uni-ec-canvas/echarts'
	import Api from '@/api/api'
	let chart = null
	const upColor = '#DF1525';
	const upBorderColor = '#DF1525';
	const downColor = '#0BB329';
	const downBorderColor = '#0BB329';
	export default {
		components: { uniEcCanvas },
		onLoad() {
			this.loadChartDatas();
			this.$refs.canvas.init(this.initChart);
		},
		data() {
			return {
				startValue: 0,
				endValue: 0,
				chartDatas: {categoryData: [], values: []},
				ec: {
					lazyLoad: true,
					option: {
						animation: false,
						tooltip: {
							trigger: 'axis',
							showDelay: 0,
							hideDelay: 0,
							axisPointer: {
								type: 'cross'
							},
							backgroundColor: '#FFF',
							textStyle: {
								color: '#616161'
							},
							formatter: (params) => {
									const str = `${params[0].name}\n开：${params[0].data[1]}\n收：${params[0].data[2]}\n高：${params[0].data[4]}\n低：${params[0].data[3]}`
									return str
							},
						},
						grid: {
							left: '10%',
							right: '5%',
							bottom: '5%'
						},
						xAxis: {
							type: 'category',
							data: [],
							boundaryGap: false,
							axisLine: { onZero: false, show: false },
							axisTick: {
							  lineStyle: {
							    type: 'dashed'
							  }
							},
							splitLine: { show: false },
							min: 'dataMin',
							max: 'dataMax',
						},
						yAxis: {
							scale: true,
							splitArea: {show: false},
							axisLine: {show: false},
							splitLine: {
							  lineStyle: {
							    type: 'dashed'
							  }
							}
						},
						series: [{
							id: 'candlestick',
							name: '日K',
							type: 'candlestick',
							data: [],
							itemStyle: {
								color: upColor,
								color0: downColor,
								borderColor: upBorderColor,
								borderColor0: downBorderColor
							}
						}],
						dataZoom: [{
							id: 'candlestickZoom',
							type: 'inside',
							minValueSpan: 23,
							maxValueSpan: 23,
							startValue: 0,
							endValue: 0,
							zoomLock: true
						}]
					}
				}
			};
		},
		methods: {
			calcStartEndValue(first){
				if(first){
					this.startValue = this.chartDatas.categoryData.length - 24;
					this.endValue = this.chartDatas.categoryData.length - 1;
				}else {
					let start = chart.getOption().dataZoom[0].start;
					this.startValue = parseInt(start / 100 * this.chartDatas.categoryData.length);
					this.endValue = this.startValue + 23;
				}
			},
			
			async loadChartDatas(add){
				console.log('加载数据...');
				const chartDatas = await Api.getChartDatas();
				if(add){
					this.startValue = this.startValue + chartDatas.categoryData.length;
					this.endValue = this.startValue + 23;
					this.chartDatas.categoryData = [...chartDatas.categoryData, ...this.chartDatas.categoryData];
					this.chartDatas.values = [...chartDatas.values, ...this.chartDatas.values];								
					// console.log('new_start', this.startValue);
					chart.setOption({
							xAxis: {
								data: this.chartDatas.categoryData,
							},
							series: [{
								id: 'candlestick',
								data: this.chartDatas.values
							}],
							dataZoom: [{
								id: 'candlestickZoom',
								startValue: this.startValue,
								endValue: this.endValue
							}],
					});
				}else {
					this.chartDatas = chartDatas;
					this.calcStartEndValue(true);
				}
			},
			
			initChart(canvas, width, height, canvasDpr) {
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
				this.ec.option.xAxis.data = this.chartDatas.categoryData;
				this.ec.option.series[0].data = this.chartDatas.values;
				this.ec.option.dataZoom[0].startValue = this.startValue;
				this.ec.option.dataZoom[0].endValue = this.endValue;
				canvas.setChart(chart)
				chart.setOption(this.ec.option);
				chart.on('datazoom', async (event) => {
					this.calcStartEndValue()
					if(this.startValue <= 24){
						this.loadChartDatas(true);
					}
				});
				return chart
			},
		}
	}
</script>

<style lang="scss" scoped>
	.uni-ec-canvas {
		width: 100%;
		height: 750rpx;
		display: block;
	}
</style>